<template>
	<view>
		<view class="search">
			<u-notice-bar mode="horizontal" :is-circular="false" :text="title"></u-notice-bar>
		</view>
		
		<!-- 上层信息框 -->
		<view class="topInfo baseBack">
			<view class="cardNumber"></view>
			<view style="color:#AC58FA;margin-top: 20rpx;margin-left: 10rpx;margin-right: auto;">{{formData.nickName}}</view>
			<view style="margin-right: 50rpx;margin-top: 50rpx;color:grey;">
				<button class="cu-btn sm round bg-red" v-if="!formData.empSn" :disabled="disabled" @click="getIdCard()">选择设备</button>
			</view>
		</view>
		
		<!-- 虚线勿动 -->
		<view class="conUp">
			<view class="splitArea"></view>
		</view>
		
		<!-- 中层信息框 -->
		<view class="middleInfo baseBack">

      <view style="padding-bottom: 10rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;">员工工号：</text>
        <text class="pv">{{formData.code | empDec}}</text>
      </view>
	  <view style="padding-bottom: 15rpx; color: grey;">
	    <view class="pp"></view>
	    <text style=" letter-spacing: 10rpx;">联系电话：</text>
	    <text class="pv">{{formData.phonenumber | empDec}}</text>
	  </view>
      <view style="padding-bottom: 15rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;"> 卡 类 型：</text>
        <text class="pv">{{formData.cardType | cardType}}</text>
      </view>
      <view style="padding-bottom: 15rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;"> 原 卡 号：</text>
        <text class="pv">{{formData.empDec | empDec}}</text>
      </view>
	  <view style="padding-bottom: 15rpx; color: grey;">
	    <view class="pp"></view>
	    <text style=" letter-spacing: 10rpx;">新 卡 号：</text>
	    <text class="pv">{{formData.newEmpDec | empDec}}</text>
	  </view>
		</view>
		
		<!-- 虚线勿动 -->
		<view class="conUp">
			<view class="splitArea"></view>
		</view>

		<!-- 下层信息框 -->
		<view class="downInfo baseBack">
			<!-- <view class="flex">
				<view style="margin-left: auto;margin-right: 40rpx;">
					小计：
					<text class="price">300.00</text>
					<text style="color: #AC58FA;">元</text>
				</view>
			</view>
			<view style="padding-bottom: 15rpx; color: grey;">
				<view class="pp"></view>
				备注：
				<text class="pv">— —</text>
			</view> -->
			<button type="primary" v-show="formData.empSn && formData.empDec" class="block bg-blue lg round" style="width: 80%;margin-bottom: 10px;"
				@click="determine()">保存</button>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog cancelText="关闭" confirmText="确定" title="通知" content="确定要修改该员工信息吗？" @confirm="dialogConfirm"
					></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="请选择设备发送指令" @confirm="dialogInputConfirm">
					<view style="width: 100%;">
						<uni-data-select placeholder="点击选择设备" v-model="employee" :localdata="employees" emptyText="无"/>
					</view>
					
					<!-- <uni-forms>
						<uni-forms-item labelWidth="10px">
							
						</uni-forms-item>
					</uni-forms> -->
				</uni-popup-dialog>
			</uni-popup>
		</view>
		<watermark :text="companyName"></watermark>
	</view>
</template>

<script>
import {
	getEmpInfoBysn,
	listDevice,
	sendInfo
} from "@/api/company/device.js";
import{updateUser} from '@/api/system/user.js'
import watermark from 'components/warter/watermark.vue'
export default {
	components:{watermark},
	filters:{
		cardType(value){
			switch(value){
				case 1:
					return '员工卡'
				case 2:
					return '保全卡'
				case 3:
					return '电工卡'
				case 16:
					return '管理卡'
				default:
					return ''
			}
		},
		empDec(value){
			if(!value){
				return ''
			}else{
				return value
			}
		}
	},
	data() {
	  return {
		  title:'此页面只针对已绑卡人员的换卡操作，请先点击获取按钮选择设备，下发绑卡指令后，等待机台面板出现刷卡提示，再刷卡，返回员工卡号无误，确认保存！',
		companyName:this.$store.getters.name,
		disabled:false,
		terval:'',
		timeout:'',
		employees: [],
		employee: '',
		formData: {
			userName: '',
			nickName: '',
			password: '',
			phonenumber: '',
			userType: '',
			remark: '',
			code:'',
			cardType:'',
			companyId: '',
			empSn:'',
			sn:'',
			devNum:'',
			empDec:'',
			newEmpDec:''
		},
	  }
	},
	onLoad(options) {
		if(options.user){
			this.formData = JSON.parse(decodeURIComponent(options.user));
			this.formData.empSn = ''
		}
		
	},
	onUnload() {
		if(this.terval){
			clearInterval(this.terval)
		}
		if(this.timeout){
			clearTimeout(this.timeout)
		}		
	},
	methods:{
		//选择设备
		getIdCard(){
			this.$refs.inputDialog.open();
			listDevice(
				{companyId: this.$store.getters.companyId}
			).then((res) => {
				let datas = [];
				res.rows.forEach((t) => {
					datas.push({
						value: t.devSn,
						text: t.devNum
					});
				});
				this.employees = datas;
			});
		},
		//下发绑卡指令
		dialogInputConfirm() {
			if (this.employee != null && this.employee != "") {
				this.formData.sn = this.employee
				sendInfo(this.formData).then(res =>{
					if (res.code == 200) {
						this.disabled = true
						uni.showLoading({title: '请刷卡',mask:true})
						 this.terval = setInterval(() => {
							 getEmpInfoBysn(this.formData).then(res =>{
								 if(res.code == 200 && res.data !== null){
									 this.formData.empSn = res.data.empSn
									 this.formData.newEmpDec = res.data.empDec
									 if(this.terval) clearInterval(this.terval);
									 this.terval = null
									 this.disabled = false
									 uni.hideLoading()
									 this.$modal.msgSuccess("识别成功")
								 }
							 }).catch(()=>{
								if(this.terval){
									clearInterval(this.terval)
									uni.hideLoading()
									this.terval = null
									this.disabled = false
								}
								if(this.timeout){
									clearTimeout(this.timeout)
								}
							})
						},3000)
						this.timeout = setTimeout(() =>{
							if(this.terval){
								clearInterval(this.terval)
								uni.hideLoading()
								this.$modal.msg("绑卡超时,请重新选择设备发送指令")
								this.terval = null
								this.disabled = false
							}
						},60000*2)
					} else {
						that.$modal.msgError(res.msg)
					}
					this.$refs.inputDialog.close();
				})
				// this.$refs.devset.open(this.employee);
				this.employee = "";
			}else{
				this.$modal.msgError("请选择设备")
			}
		},
		//点击保存按钮
		determine() {
			this.$refs.alertDialog.open();
		},
		//点击确认按钮
		dialogConfirm(){
			let that = this
			uni.showLoading()
			updateUser(that.formData).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							that.$modal.msgSuccess("修改信息成功!")
							this.$tab.navigateBack()
						} else {
							that.$modal.loading(res.msg)
						}
					}).catch(()=>{
						that.formData.empSn = ''
						that.formData.newEmpDec = ''
					})
			this.$refs.alertDialog.close();	
		},
	}
}
	
	
</script>

<style>
	
	.cardNumber{
		margin-right: auto;
		color: #AC58FA;
		font-size: 45rpx;
		margin: 40rpx 0rpx 40rpx 40rpx;
	}
	
	.topInfo{
		align-items: center;
		display: flex;
		height: 100rpx;
		margin: 48rpx auto 0rpx auto;
	}
	.middleInfo{
		margin: 0rpx auto;
	}
	.downInfo{
		padding-bottom: 40rpx;
		margin: 0rpx auto;
	}
	
	.conUp{
	   width: 92%; 
	   height: 70rpx;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   background-image: radial-gradient(circle at 448rpx 50rpx ,transparent 0%, transparent 8px,#fff 8px, #fff 100%);
	   background-position: 244rpx -16rpx;
	   margin: 0rpx auto;
	}
	
	.splitArea {
	  border: none;
	  border-top: 3rpx dashed #d8d8d8;
	  width: 85%;
	}
	
	.search{
		background-color: #fff;
		height: 100rpx;
	}
	
	.baseBack{
		width: 92%;
		background-color: #fff;
	}
	.price{
		color: #AC58FA;
		font-size: 50rpx;
	}
	.pp {
	  display: inline-block;
	  width: 10rpx;
	  height: 10rpx;
	  border-radius: 50%;
	  background-color: grey;
	  margin: 0rpx 30rpx 0rpx 50rpx;
	}
	.pv{
		font-weight: bold;
		margin-right: 6rpx;
		color: black;
	}
	
</style>